<template>
	<view>
		<view id="circel_container" style="    position: relative;">
			<!-- 	<view @click="center_click()"
				:class="(item == 0 || item != 5) ? 'yaokong-center yaokong-item' : 'yaokong-center yaokong-item yaokong-hover'">

			</view> -->



			<view @click="sound_add()"
				:class="(item == 0 || item != 5) ? 'yaokong-sound-add yaokong-item' : 'yaokong-sound-add yaokong-item yaokong-hover'">
				<!-- <image src="@/static/images/sound_add.png" style="margin: 10px;width: 32px;height: 32px;" /> -->
			</view>


			<view @click="sound_sub()"
				:class="(item == 0 || item != 6) ? 'yaokong-sound-sub yaokong-item' : 'yaokong-sound-sub yaokong-item yaokong-hover'">
				<!-- <image src="@/static/images/sound_sub.png" style="margin:5px;width:32px;height:32px;" /> -->
			</view>





			<view @click="top_click()"
				:class="(item == 0 || item != 1) ? 'yaokong-top yaokong-item' : 'yaokong-top yaokong-item yaokong-hover'">
				<image src="@/static/images/course-up.png"
					style="transform: rotate(-45deg);margin:50px;width:32px;height:32px;" />
			</view>
			<view @click="right_click()"
				:class="(item == 0 || item != 3) ? 'yaokong-right yaokong-item' : 'yaokong-right yaokong-item yaokong-hover'">
				<image src="@/static/images/online-school-right.png"
					style="transform: rotate(-135deg);margin:50px;width:32px;height:32px;" />
			</view>
			<view @click="bottom_click()"
				:class="(item == 0 || item != 4) ? 'yaokong-bottom yaokong-item' : 'yaokong-bottom yaokong-item yaokong-hover'">
				<image src="@/static/images/course-down.png"
					style="transform: rotate(135deg);margin:50px;width:32px;height:32px;" />
			</view>
			<view @click="left_click()"
				:class="(item == 0 || item != 2) ? 'yaokong-left yaokong-item' : 'yaokong-left yaokong-item yaokong-hover'">
				<image src="@/static/images/to-back.png"
					style="transform: rotate(45deg);margin:50px;width:32px;height:32px;" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: 0
			}
		},
		methods: {
			top_click() {
				this.clk(1)
				this.$emit("btn_click", "UP")
			},
			left_click() {
				this.clk(2)
				this.$emit("btn_click", "LEFT")
			},
			right_click() {
				this.clk(3)
				this.$emit("btn_click", "RIGHT")
			},
			bottom_click() {
				this.clk(4)
				this.$emit("btn_click", "DOWN")
			},
			sound_add() {
				this.clk(5)
				this.$emit("btn_click", "sound_add")
			},
			sound_sub() {
				this.clk(6)
				this.$emit("btn_click", "sound_sub")
			},
			// center_click(){
			// 	this.clk(5)
			// 	this.$emit("btn_click" , "center")
			// } ,
			clk(idx) {
				this.item = idx;
				var self = this
				setTimeout(function() {
					self.item = 0
				}, 100)
			}
		}
	}
</script>

<style>
	#circel_container {
		width: 250px;
		height: 250px;
		position: relative;
		top: 0px;
		left: 0px;
		background: #ececec;
		border-radius: 150px;
		border: 1px solid #ececec;
	}

	.yaokong-item {
		width: 100%;
		height: 100%;
		background: #f7f7f7;
	}

	.yaokong-top {
		width: 250px;
		height: 250px;
		transform: rotate(45deg);
		border-radius: 150px;
		clip: rect(0px, 124px, 125px, 0px);
		position: absolute;
	}

	.yaokong-left {
		width: 250px;
		height: 250px;
		transform: rotate(-45deg);
		border-radius: 150px;
		clip: rect(0px, 124px, 125px, 0px);
		position: absolute;
		top: 0px;
	}

	.yaokong-right {
		width: 250px;
		height: 250px;
		transform: rotate(135deg);
		border-radius: 150px;
		clip: rect(0px, 125px, 125px, 0px);
		position: absolute;
		top: 0px;
	}

	.yaokong-bottom {
		width: 250px;
		height: 250px;
		transform: rotate(225deg);
		border-radius: 150px;
		clip: rect(0px, 124px, 124px, 0px);
		position: absolute;
		top: 0px;
	}

	.yaokong-sound-add {
		width: 100px;
		height: 50px;
		border-radius: 150px 150px 0 0;
		position: absolute;
		top: 75px;
		left: 75px;
		border: 1px solid #ececec;
		z-index: 9999;
		text-align: center;

	}

	.yaokong-sound-sub {
		width: 100px;
		height: 50px;
		border-radius: 0 0 150px 150px;
		position: absolute;
		top: 127px;
		left: 75px;
		border: 1px solid #ececec;
		z-index: 9999;
		text-align: center;

	}

	/* meil */
	.yaokong-center {
		width: 100px;
		height: 50px;
		border-radius: 150px 150px 0 0;
		position: absolute;
		top: 75px;

		left: 75px;
		border: 1px solid #ececec;
		z-index: 9999;
		text-align: center;
		line-height: 100px;
	}

	.yaokong-hover {
		background: #efefef;
	}
</style>